<template>
  <el-card>
    <div class="report-header">
      <h3>异常情况统计表</h3>
      <div class="report-controls">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleDateChange"
          style="width: 250px;"
        />
        <el-button type="success" @click="exportExcel">导出Excel</el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="date" label="日期" width="120" />
      <el-table-column prop="inspectionFail" label="验货失败数量" width="120">
        <template #default="scope">
          <span class="inspection-fail-value">{{ scope.row.inspectionFail }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="wrongShipment" label="错发/漏发数量" width="120">
        <template #default="scope">
          <span class="wrong-shipment-value">{{ scope.row.wrongShipment }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="logisticsLost" label="物流丢件数量" width="120">
        <template #default="scope">
          <span class="logistics-lost-value">{{ scope.row.logisticsLost }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userRefund" label="用户退款数量" width="120">
        <template #default="scope">
          <span class="user-refund-value">{{ scope.row.userRefund }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalExceptions" label="异常总数" width="100">
        <template #default="scope">
          <span class="total-exceptions-value">{{ scope.row.totalExceptions }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as XLSX from 'xlsx'

const dateRange = ref(['2024-08-01', '2024-08-14'])
const tableData = ref<any[]>([])

const generateExceptionData = (startDate: string, endDate: string) => {
  const start = new Date(startDate)
  const end = new Date(endDate)
  const data = []
  
  let current = new Date(start)
  while (current <= end) {
    const month = current.getMonth() + 1
    const date = current.getDate()
    
    // 生成异常数据
    const inspectionFail = Math.floor(Math.random() * 20) + 5
    const wrongShipment = Math.floor(Math.random() * 15) + 3
    const logisticsLost = Math.floor(Math.random() * 10) + 2
    const userRefund = Math.floor(Math.random() * 12) + 2
    
    const totalExceptions = inspectionFail + wrongShipment + logisticsLost + userRefund
    
    data.push({
      date: `${month}月${date}日`,
      inspectionFail,
      wrongShipment,
      logisticsLost,
      userRefund,
      totalExceptions
    })
    
    current.setDate(current.getDate() + 1)
  }
  
  return data
}

const updateData = () => {
  const data = generateExceptionData(dateRange.value[0], dateRange.value[1])
  tableData.value = data
}

const handleDateChange = () => {
  updateData()
}

const exportExcel = () => {
  // 准备数据，添加中文表头
  const exportData = tableData.value.map(item => ({
    '日期': item.date,
    '验货失败数量': item.inspectionFail,
    '错发/漏发数量': item.wrongShipment,
    '物流丢件数量': item.logisticsLost,
    '用户退款数量': item.userRefund,
    '异常总数': item.totalExceptions,
    '备注': '异常情况正常'
  }))
  
  // 计算汇总行
  const totals = {
    '日期': '汇总',
    '验货失败数量': exportData.reduce((sum, item) => sum + item['验货失败数量'], 0),
    '错发/漏发数量': exportData.reduce((sum, item) => sum + item['错发/漏发数量'], 0),
    '物流丢件数量': exportData.reduce((sum, item) => sum + item['物流丢件数量'], 0),
    '用户退款数量': exportData.reduce((sum, item) => sum + item['用户退款数量'], 0),
    '异常总数': exportData.reduce((sum, item) => sum + item['异常总数'], 0),
    '备注': '异常情况汇总'
  }
  
  // 在数据顶部添加汇总行
  const finalData = [totals, ...exportData]
  
  const ws = XLSX.utils.json_to_sheet(finalData)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '异常情况统计')
  XLSX.writeFile(wb, '异常情况统计报表.xlsx')
}

onMounted(() => {
  updateData()
})
</script>

<style scoped>
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.report-header h3 {
  margin: 0;
  color: #303133;
}

.report-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inspection-fail-value {
  color: #f56c6c;
  font-weight: bold;
}

.wrong-shipment-value {
  color: #e6a23c;
  font-weight: bold;
}

.logistics-lost-value {
  color: #909399;
  font-weight: bold;
}

.user-refund-value {
  color: #67c23a;
  font-weight: bold;
}

.total-exceptions-value {
  color: #409eff;
  font-weight: bold;
}
</style> 